<template>
    <div>
        <!--<a-table
                :pagination="false"
                size="small" :columns="columns" :data-source="goodsData"
                :scroll="{ x: 800, y: 650 }">
                              <span slot="search" slot-scope="text, record">
                                    <a-tag :color="record.search===1?'green':record.search===0?'gray':''">
                                          {{record.search===1?'是':'否'}}
                                    </a-tag>

                            </span>

            <div slot="action" slot-scope="text,record">

                &lt;!&ndash;   <a-popconfirm
                           title="确定删除该条记录吗?"
                           ok-text="确定"
                           cancel-text="取消"
                           @confirm="handleDelete(record)"
                   >
                       <a style="color: red">删除</a>


                   </a-popconfirm>
                   <a-divider type="vertical"></a-divider>
                   <a @click="handleRecovery(record)">恢复</a>&ndash;&gt;
                <a-divider type="vertical"></a-divider>

                <a>下移</a>

            </div>

        </a-table>-->
        <div>
            <a-form-model layout="inline">

                <a-row>
                    <a-col :span="6">
                        <a-form-model-item label="商品名：">
                            <a-input v-model="searchData.title"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="商品编号：">
                            <a-input v-model="searchData.goodsId"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="销量：">
                            <a-input-number v-model="searchData.sellCountMin"></a-input-number>
                            —
                            <a-input-number v-model="searchData.sellCountMax"></a-input-number>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="单价：">
                            <a-input-number v-model="searchData.priceMin"></a-input-number>
                            —
                            <a-input-number v-model="searchData.priceMax"></a-input-number>
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="分类：">
                            <a-cascader :field-names="{ label: 'name', value: 'id', children: 'children' }"
                                        placeholder="商品分类"
                                        style="width: 300px" :options="categoryList" change-on-select
                                        @change="onCategoryChange"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="商品状态：">
                            <a-select
                                    @change="goodsStatusChange"
                                    style="width: 200px"
                                    v-model="searchData.status"
                                    placeholder="商品状态"
                            >
                                <a-select-option v-for="item in goodsStatusList" :value="item.id">
                                    {{item.name}}
                                </a-select-option>

                            </a-select>
                        </a-form-model-item>
                    </a-col>


                </a-row>
                <a-button style="color: #E2231A" @click="loadData">搜索</a-button>
                <a-button style="color: gray" @click="resetSearch">重置</a-button>


            </a-form-model>
        </div>
        <a-table rowKey="id" :pagination="false" size="small" :columns="columns" :data-source="goodsData"
                 class="components-table-demo-nested">
            <span slot="operation" slot-scope="record">
                <a><a-icon type="edit" @click="editGoods(record)"></a-icon></a>
                <a-divider type="vertical"></a-divider>
                <a-popconfirm
                        title="确定下架该商品吗?"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="offSellGoods(record)"
                >
                <a-button type="link" v-if="record.onSell===1">下架商品</a-button>
                  </a-popconfirm>

            </span>
            <a slot="createTime" slot-scope="record" style="color: black">{{moment(record.createTime).format("YYYY-MM-DD HH:mm:ss")}}</a>
            <a v-if="columns.find(item=>item.dataIndex==='deleteTime')" slot="deleteTime" slot-scope="record"
               style="color: black">{{moment(record.deleteTime).format("YYYY-MM-DD HH:mm:ss")}}</a>
            <span slot="onSell" slot-scope="text" style="color: black">
                <a-tag :color="text===1?'blue':''">{{text===1?'出售中':'仓库中'}}</a-tag>
            </span>
            <span slot="status" slot-scope="text,record" style="color: black">
<!--                1有效/已审核 0 无效 2 待审核(第一次发布) 3 待审核（商品修改）-->
<!--                <a-tag color="green">待审核</a-tag>-->
                <a-tag :color="record.status===1?'green':record.status===0?'red':(record.status===2||record.status===3)?'blue':''">{{record.status===1?'审核通过(有效)':record.status===0?'审核未通过':(record.status===2||record.status===3)?'待审核':'未知'}}</a-tag>
            </span>
            <span slot="brand" slot-scope="record">
                <img v-if="record.logo" :src="record.logo">
                <span v-else>{{record.name}}</span>
            </span>
            <a-table
                    rowKey="id"
                    align="center"
                    size="small"
                    slot="expandedRowRender"
                    slot-scope="record"
                    :columns="innerColumns"
                    :data-source="record.goodsSkuList"
                    :pagination="false"
            >
                <span slot="pictures" slot-scope="text">
                    <img style="width: 70px;height: 70px" :src="text">
                </span>
                <span slot="spec" slot-scope="text">{{text}} </span>
                <span slot="valid" slot-scope="text"> <a-badge :color="text===1?'green':'red'"/>{{text===1?'售卖中':'失效'}} </span>

            </a-table>
        </a-table>
        <a-pagination showQuickJumper v-model="pageMap.page" :page-size="pageMap.size"
                      :total="pageMap.total" @change="pageChange"/>
    </div>
</template>

<script>
    const columns = [
        {title: '宝贝', dataIndex: 'name', width: 250},
        {title: '品牌', dataIndex: 'brand', width: 150, scopedSlots: {customRender: 'brand'}, align: 'center'},
        {title: '分类', dataIndex: 'category', width: 250},
        {title: '创建时间', dataIndex: 'createTime', width: 150, scopedSlots: {customRender: 'createTime'}},
        {title: '销量', dataIndex: 'sellCount', align: 'center', width: 100},
        {title: '出售状态', dataIndex: 'onSell', align: 'center', width: 100, scopedSlots: {customRender: 'onSell'}},
        {title: '商品状态', dataIndex: 'status', align: 'center', width: 100, scopedSlots: {customRender: 'status'}},
        {title: '操作', key: 'operation', scopedSlots: {customRender: 'operation'}, align: 'center'},
    ];
    const innerColumns = [
        {title: '图片', dataIndex: 'pictures', scopedSlots: {customRender: 'pictures'}, align: 'center'},
        {title: '规格', dataIndex: 'spec', width: 180, scopedSlots: {customRender: 'spec'}, align: 'center'},
        {title: '库存', dataIndex: 'stock', width: 100, align: 'center'},
        {title: '价格', dataIndex: 'price', align: 'center'},
        {title: '状态', dataIndex: 'valid', scopedSlots: {customRender: 'valid'}, align: 'center'},
        {title: '积分赠送', dataIndex: 'integral', key: 'name', align: 'center'},
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: {customRender: 'operation'},
        },
    ];


    import goodsApi from "../../../api/goods/goodsApi";
    import moment from 'moment-timezone'
    import cateApi from "../../../api/cateApi";
    import {getUrlParam} from "../../../utils/urlUtils";
    import {goodsStatusList} from "../../../constants/goodsStatus";

    export default {
        name: "GoodsCenter",
        inject: ["reload"],
        data() {
            return {
                columns,
                innerColumns,
                goodsData: [],
                pageMap: {
                    page: 1,
                    size: 8,
                    total: 0
                },
                searchData: {
                    title: "",
                    cid1: null,
                    cid2: null,
                    cid3: null,
                    status:-1,
                    onSell: "1",
                    goodsId: "",
                    sellCountMin: null,
                    sellCountMax: null,
                    priceMin: null,
                    priceMax: null
                },
                goodsStatusList,
                categoryList: [],//分类级联
            }
        },

        created() {

            this.loadData()
            this.loadCate();
        },
        methods: {
            moment,
            goodsStatusChange(value){
                this.searchData.status=value;
                this.loadData()
            },
            /**
             * 分类选择
             * @param value
             */
            onCategoryChange(value) {
                if (value.length > 0) {
                    for (let i = 0; i < value.length; i++) {
                        if (i === 0) {
                            this.searchData.cid1 = value[i]
                        } else if (i === 1) {
                            this.searchData.cid2 = value[i]
                        } else if (i === 2) {
                            this.searchData.cid3 = value[i]
                        }
                    }
                    this.loadData()
                }

            },
            loadCate() {
                cateApi.categoryTree().then(resp => {
                    if (resp.data.flag) {
                        this.categoryList = resp.data.data;
                    }
                })
            },
            pageChange(current) {
                this.pageMap.page = current;
                this.loadData()
            },
            loadData() {
                goodsApi.shopGoodsList(this.searchData, this.pageMap.page, this.pageMap.size).then(resp => {
                    if (resp.data.flag) {
                        this.goodsData = resp.data.data.rows;
                        this.pageMap.total = resp.data.data.total;
                    }
                })
            },
            resetSearch() {
                this.reload()
            },
            offSellGoods(record) {
                goodsApi.updateOnSellStatus(record.id, 0).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.reload()
                    }
                })
            },

            editGoods(goods) {

                console.log(goods)
                let url = `/publish-goods?goods=${encodeURI(JSON.stringify({id: goods.id}))}&cate1=${encodeURI(JSON.stringify({id: goods.cid1}))}&cate2=${encodeURI(JSON.stringify({id: goods.cid2}))}&cate3=${encodeURI(JSON.stringify({id: goods.cid3}))}`
                this.$router.push(encodeURI(url))

            }
        }

    }
</script>

<style scoped>
    .order-shop-top {
        margin-right: 20px;
        font-size: 12px;
    }

    .table-header {
        padding: 15px 5px;
        background: #e7e7e7;
        color: #00050c;
    }

    .order-card {
        border: 1px solid #ececec;
        padding: 5px 5px 0 5px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .order-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .goods-title {
        line-height: 16px;
        color: #3c3c3c;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .goods-spec {
        font-size: 12px;
        color: #9e9e9e;
        margin-top: 10px;
    }

    .shopName {
        color: #3C3C3C;
    }

    .shopName :hover {
        color: red;
    }

    .delete-btn {
        font-size: 16px;
    }

    .delete-btn :hover {
        color: #E2231A;
    }
</style>